import Api from "../../utils/request";
// pages/video/video.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 导航列表数据
    navList: [],
    // 导航默认选中
    navId: '',
    // 视频列表
    videoList: [],
    // 视频性能优化，图片替换视频第一帧标识
    videoId: '',
    // 记录视频暂停时进度时间
    videoUpdateTime: [],
    // 标识下拉刷新是否被触发
    isRefresh: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 进入当前页面先判断用户是否已经登录
    let userInfo = wx.getStorageSync('userInfo')
    if (!userInfo) {
      // 未登录，跳转至登录页
      wx.showToast({
        title: '请先登录！',
        icon: 'none',
        success: () => {
          setTimeout(() => {
            wx.reLaunch({
              url: '/pages/login/login',
            })
          }, 1000)
        }
      })
    } else {
      // 调用获取导航数据函数
      this.getNavGroupList()
    }
  },
  // 获取导航数据功能行数
  async getNavGroupList() {
    let navGroudData = await Api.request('/video/group/list')
    // console.log(navGroudData);
    this.setData({
      navList: navGroudData.data.slice(0, 14),
      navId: navGroudData.data[0].id
    })
    // 调用获取视频内容
    this.getVideoList(this.data.navId)
  },
  // 获取navId对应下的视频内容
  async getVideoList(navId) {
    let videoData = await Api.request('/video/group', { id: navId })
    // console.log(videoData);
    if (videoData.datas.length === 0) {
      wx.showToast({
        title: '暂无推荐视频',
        icon: 'none'
      })
      return;
    }
    //关闭加载提示
    wx.hideLoading();
    let index = 0;
    let videoList = videoData.datas.map(item => {
      item.id = index++;
      return item;
    })
    // console.log(videoList);
    this.setData({
      videoList,
      isRefresh: false // 关闭下拉刷新
    })
  },
  // 切换导航tab
  changeNav(event) {
    let navId = event.currentTarget.dataset.navid
    // console.log(navId);
    this.setData({
      navId,
      videoList: []
    })
    // 切换时加loading动画，提高用户体验
    wx.showLoading({
      title: '正在加载',
    })
    // 动态获取nav对应视频信息
    this.getVideoList(this.data.navId)
  },
  //点击播放/ 继续播放 回调
  handlePlay(event) {
    // 问题：多个视频同时播放的问题
    // 需求：
    // 1. 在点击播放的事件中需要找到上一个播放的视频
    // 2. 在播放新的视频之前关闭上一个正在播放的视频
    // 关键：
    // 1. 如何找到上一个播放视频的实例对象
    // 2. 如何确认点击播放的视频和正在播放的视频不是同一个
    // 单例模式
    // 1. 需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象
    // 2. 节省内容空间
    let vid = event.currentTarget.id
    // 性能优化
    this.setData({
      videoId: vid
    })
    // console.log(this);
    // 关闭上一个视频
    // videoContext.stop()
    this.vid !== vid && this.videoContext && this.videoContext.stop();
    this.vid = vid;
    // 创建控制video标签的实例对象
    this.videoContext = wx.createVideoContext(vid)
    // 判断当前的视频之前是否播放过，是否有播放记录，如果有，就跳转至指定的播放位置
    let { videoUpdateTime } = this.data;
    let videoItem = videoUpdateTime.find(item => item.vid === vid)
    if (videoItem) {
      this.videoContext.seek(videoItem.currentTime)
    }
    // this.videoContext.play()

    // 方法二 :
    // 播放新视频之前找到上一个正在播放的视频并关闭
    // let vid = event.currentTarget.id;
    // this.setData({
    //   videoId: vid
    // })

    // //创建控制video的实例对象
    // this.videoContext = wx.createVideoContext(vid);
    // //判断当前的视频是否播放过，有播放记录，有则跳转到之上次播放的位置
    // let {videoUpdateTime} = this.data;
    // let videoItem = videoUpdateTime.find(item => item.vid === vid);
    // if(videoItem){
    //   this.videoContext.seek(videoItem.currentTime);
    // }
  },
  //监听视频播放进度
  handleTimeUpdate(event) {
    // console.log(event);
    let videoTimeObj = { vid: event.currentTarget.id, currentTime: event.detail.currentTime }
    // console.log(videoTimeObj);
    let { videoUpdateTime } = this.data;
    //  思路：判断记录播放时长的videoUpdateTime数组中是否含有当前视频的播放记录
    //  1. 如果有，在原有的播放记录中修改播放时间为当前的播放时间
    //  2. 如果没有，需要在数组中添加当前视频的播放对象
    let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid)
    if (videoItem) { // true, 之前有存储记录
      // 那就修改原有数据
      videoItem.currentTime = event.detail.currentTime
    } else { // 没有
      //  将当前的数据存储进数组
      videoUpdateTime.push(videoTimeObj)
    }
    // 更新videoUpdateTime的数据
    this.setData({
      videoUpdateTime
    })
  },

  //视频播放结束调用
  handleEnded(event) {
    // 当视频结束，移除视频播放记录
    let { videoUpdateTime } = this.data;
    videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.vid), 1)
    this.setData({
      videoUpdateTime
    })
  },

  // 自定义下拉刷新
  handleRefresher() {
    // console.log('下拉刷新');
    this.getVideoList(this.data.navId)
  },

  // 跳转搜索页面
  toSearch() {
    wx.navigateTo({
      url: '/pages/search/search',
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function ({ from }) {
    console.log(from);
    if (from === 'button') {
      return {
        title: '这是由页面button按钮转发',
        page: '/pages/video/video',
        imageUrl: ''
      }
    } else if (from === 'menu') {
      return {
        title: '这是由页面头部menu按钮转发',
        page: '/pages/video/video',
        imageUrl: ''
      }
    }
  }
})